<template>
    <div>
        <svg :width="size" :height="size">
            <polygon :points="hexagonPoints" fill="yellow" />
        </svg>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            size: 200 // 六边形的大小
        };
    },
    computed: {
        hexagonPoints() {
            const centerX = this.size / 2;
            const centerY = this.size / 2;
            const radius = this.size / 2;

            // 计算六边形的顶点坐标
            const points = [];
            for (let i = 0; i < 6; i++) {
                const angle = (2 * Math.PI / 6) * i;
                const x = centerX + radius * Math.cos(angle);
                const y = centerY + radius * Math.sin(angle);
                points.push(`${x},${y}`);
            }

            return points.join(" ");
        }
    }
};
</script>
